{% extends "leftmenutemplate.html" %}
{% load static %}

{% block content %}
    <link type="text/css" href="{% static "countries_flag/mycss/flag-icon.min.css" %}" rel="stylesheet">
    <style>
        .tips-box{
            border: 1px solid #EAC81C;
            border-radius: 10px;
            background-color: rgba(232,216,135, 0.4);
        }
        .tips-box legend{
            font-size: large;
            color: #EAC81C;
        }
        .layui-form .search_item{
            float: left;
        }
        .layui-form .search_content{
            width: 100px;
        }
        .layui-form .search_input{
            width: 200px;
        }
        .layui-row{
            margin-bottom: 20px;
        }
        .table-box{
            border: 1px solid rgba(166,166,166, 0.4);
            border-radius: 10px;
            padding: 10px 10px;
        }
        input:hover{
            border: 2px solid rgba(57,188,94, 1);
        }
        .layui-table-tool{
            display: none;
        }

    </style>

    <div class="layui-container" style="width: 100%">
        <div class="layui-row" >
            <fieldset class="layui-elem-field layui-field-title tips-box">
                <legend><i class="layui-icon layui-icon-speaker" style="font-size: 30px"></i></legend>
                <div class="layui-field-box" style="padding-left: 10px">
                    <p><span class="layui-badge-dot layui-bg-blue"></span>点击“添加店铺”按钮,按照提示即可完成店铺授权！</p>
                    <p><span class="layui-badge-dot layui-bg-blue"></span>为了避免可能存在的店铺关联，请在店铺常用的ip和电脑上进行授权操作！</p>
                    <p><span class="layui-badge-dot layui-bg-blue"></span>添加后我们会尽快获取店铺数据进行分析，请耐心等待！</p>
                </div>
            </fieldset>
        </div>

         <div class="layui-row table-box" >
             <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                 <div class="layui-row">
                    <div class="layui-form" action="">
                        <div class="search_item search_content">
                            <select id="status"  lay-filter="test" style="border-radius: 20%">
                                <option value="" selected>全部状态</option>
                                <option value="1">授权成功</option>
                                <option value="2">授权中</option>
                                <option value="3">授权失败</option>
                            </select>
                        </div>
                        <div class="search_item search_input">
                                <input type="text" id="search_input" placeholder="店铺搜索" autocomplete="off" class="layui-input">
                        </div>

                        <div style="float: right">
                            <button type="button" class="layui-btn  layui-btn-normal" onclick="start_authorization()">
                                 <i class="layui-icon">&#xe608;</i>添加店铺
                             </button>
                        </div>
                    </div>
                </div>
                 <div class="layui-row">
                     <script type="text/html" id="toolbar">
                         <div style="display: none"><button type="button" id="search_btn" lay-event="search" >开始查询</button></div>
                     </script>
                     <table id="authorization" lay-filter="authorization_table"></table>
                 </div>
             </div>
         </div>
    </div>

    <script type="text/html" id="status_template">
        {% verbatim %}
            {{#  if(d.status == '1'){ }}
                授权成功<B><i class="layui-icon layui-icon-ok"  style="float:right; color:#0C7F2D;"></i></B>
            {{#  } else if(d.status == '0'){ }}
                授权中<B><i class="layui-icon layui-icon-refresh"  style="float:right;color:#05D7FB;"></i></B>
            {{#  } else if(d.status == '-1'){ }}
                授权失败<B><i class="layui-icon layui-icon-close"  style="float:right; color:#FAB107;"></i></B>
            {{#  } }}
        {% endverbatim %}
    </script>

    <script>
        layui.use(['table', 'form'], function(){
            var table = layui.table;
            var form = layui.form;
            table.render({
                elem: '#authorization',
                url: '/pages/table/authorizatoin/', //数据接口
                where: { //设定异步数据接口的额外参数
                    status: '',
                    search: '',
                },
                limit: 15,
                toolbar: '#toolbar', //绑定工具条
                page: true, //开启分页
                cols: [[ //表头
                    {field: 'shopname', title: '店铺名称'},
                    {field: 'sellerid', title: 'SellerID'},
                    {field: 'site', title: '站点',templet: function(d){
                        return d.site + '<i class="flag-icon flag-icon-' + d.site_abbr + ' "  style="float:right; font-size:25px"></i>'
                    }},
                    {field: 'status', title: '授权状态',  templet: '#status_template'},
                    {field: 'authorizationd_datetime', title: '授权时间'},
                ]]
            });
             // 监听工具条事件
            table.on('toolbar(authorization_table)', function(obj){
                var status = $('#status').val()|| '';
                var search = $('#search_input').val() || '';
                 switch(obj.event){
                    case 'search':
                        table.reload('authorization', {
                            where: { //设定异步数据接口的额外参数
                                status: status,
                                search: search, //搜索店铺
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    break;
                }
            });


            form.on('select(test)', function(data){
               $('#search_btn').click();
            });
        });

       $('#search_input').bind('keypress',function(event){
             if(event.keyCode == "13")
             {
                 $('#search_btn').click()
             }
            });

       function reload() {
           window.location.reload();
       }

       function start_authorization() {
            layui.use('layer', function () {
                var layer = layui.layer;

                layer.config({
                    extend: 'myskin/style.css',
                });

                layer.open({
                    type: 2,
                    title: "店铺授权",
                    offset: '60px',
                    area: ['55%', '90%'],
                    shade: [0.8, '#393D49'],
                    shadeClose: true,
                    move: false,
                    resize : false,
                    content: "/pages/authorization_page/",
                    skin: 'mypop-ups',          //仅限于单个模态框的使用
                    end: function () {
                        reload();
                    }
                });

            });
       }

    </script>
{% endblock content %}